<template>
  <div class="order-details">
    <!-- 顶部成功区域 -->
    <div class="success-section">
      <!-- 头部 -->
      <div class="header">
        <div class="back-button" @click="goBack">
          <span class="back-arrow">‹</span>
        </div>
        <h1 class="title">订单详情</h1>
      </div>
      
      <!-- 成功插图 -->
      <div class="success-illustration">
        <div class="basket-container">
          <div class="shopping-basket">
            <div class="basket-body">
              <div class="basket-slats">
                <div class="slat"></div>
                <div class="slat"></div>
                <div class="slat"></div>
                <div class="slat"></div>
                <div class="slat"></div>
              </div>
            </div>
            <div class="basket-handle"></div>
          </div>
          <div class="checkmark">✓</div>
          <div class="coins-stack">
            <div class="coin coin-1"></div>
            <div class="coin coin-2"></div>
            <div class="coin coin-3"></div>
          </div>
          <div class="stars">
            <div class="star star-1">★</div>
            <div class="star star-2">★</div>
            <div class="star star-3">★</div>
            <div class="star star-4">★</div>
          </div>
        </div>
      </div>
      
      <!-- 成功消息 -->
      <div class="success-message">
        <span class="message-text">提交成功</span>
        <div class="success-icon">
          <span class="checkmark-small">✓</span>
        </div>
      </div>
    </div>

    <!-- 底部订单信息区域 -->
    <div class="order-info-section">
      <!-- 预计配送 -->
      <div class="delivery-info">
        <div class="delivery-label">预计配送</div>
        <div class="delivery-time">{{ estimatedDeliveryTime }}</div>
      </div>
      
      <!-- 订单状态按钮 -->
      <div class="order-status-btn" @click="viewOrderStatus">
        <span class="status-text">订单状态</span>
        <div class="play-icon">
          <span class="play-triangle">▶</span>
        </div>
      </div>
      
      <!-- 订单详情列表 -->
      <div class="order-details-list">
        <div class="detail-item">
          <div class="detail-icon order-icon">✓</div>
          <div class="detail-content">
            <div class="detail-label">订单编号</div>
            <div class="detail-value">{{ orderNumber }}</div>
          </div>
        </div>
        
        <div class="detail-item">
          <div class="detail-icon time-icon">🕒</div>
          <div class="detail-content">
            <div class="detail-label">下单时间</div>
            <div class="detail-value">{{ orderTime }}</div>
          </div>
        </div>
        
        <div class="detail-item">
          <div class="detail-icon payment-icon">💳</div>
          <div class="detail-content">
            <div class="detail-label">支付方式</div>
            <div class="detail-value">{{ paymentMethod }}</div>
          </div>
        </div>
      </div>
      
      <!-- 继续购物按钮 -->
      <div class="continue-shopping-btn" @click="continueShopping">
        继续购物
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'

const router = useRouter()

// 生成随机订单编号
const generateOrderNumber = () => {
  const timestamp = Date.now().toString().slice(-8)
  const random = Math.floor(Math.random() * 10000).toString().padStart(4, '0')
  return `#${timestamp}${random}`
}

// 生成预计配送时间
const generateEstimatedDeliveryTime = () => {
  const now = new Date()
  const deliveryDate = new Date(now.getTime() + 2 * 24 * 60 * 60 * 1000) // 2天后
  const year = deliveryDate.getFullYear()
  const month = String(deliveryDate.getMonth() + 1).padStart(2, '0')
  const day = String(deliveryDate.getDate()).padStart(2, '0')
  const hours = String(deliveryDate.getHours()).padStart(2, '0')
  const minutes = String(deliveryDate.getMinutes()).padStart(2, '0')
  const seconds = String(deliveryDate.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
}

// 生成真实下单时间
const generateOrderTime = () => {
  const now = new Date()
  const hours = now.getHours()
  const minutes = now.getMinutes()
  const ampm = hours >= 12 ? 'PM' : 'AM'
  const displayHours = hours % 12 || 12
  const displayMinutes = String(minutes).padStart(2, '0')
  return `${displayHours}:${displayMinutes} ${ampm}`
}

// 响应式数据
const orderNumber = ref('')
const orderTime = ref('')
const estimatedDeliveryTime = ref('')
const paymentMethod = ref('支付宝')

// 方法
const goBack = () => {
  router.back()
}

const viewOrderStatus = () => {
  console.log('查看订单状态')
  // 这里可以跳转到订单状态页面
}

const continueShopping = () => {
  router.push('/pharmacy')
}

onMounted(() => {
  // 初始化数据
  orderNumber.value = generateOrderNumber()
  orderTime.value = generateOrderTime()
  estimatedDeliveryTime.value = generateEstimatedDeliveryTime()
})
</script>

<style scoped>
.order-details {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  min-height: 100vh;
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  position: relative;
}

/* 顶部成功区域 */
.success-section {
  padding: 20px;
  padding-top: 60px;
  text-align: center;
  color: white;
}

/* 头部 */
.header {
  display: flex;
  align-items: center;
  margin-bottom: 40px;
  position: relative;
}

.back-button {
  position: absolute;
  left: 0;
  width: 40px;
  height: 40px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
  transition: all 0.3s ease;
}

.back-button:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.back-arrow {
  font-size: 24px;
  font-weight: bold;
  color: white;
}

.title {
  flex: 1;
  font-size: 18px;
  font-weight: 600;
  margin: 0;
  text-align: center;
}

/* 成功插图 */
.success-illustration {
  margin: 40px 0;
  position: relative;
  height: 200px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.basket-container {
  position: relative;
  display: inline-block;
  transform: perspective(1000px) rotateY(-15deg) rotateX(5deg);
}

.shopping-basket {
  position: relative;
  width: 140px;
  height: 90px;
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  border-radius: 12px 12px 0 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 
    0 12px 32px rgba(0, 0, 0, 0.2),
    inset 0 2px 8px rgba(255, 255, 255, 0.4),
    0 4px 16px rgba(74, 144, 226, 0.3);
  transform: translateZ(20px);
}

.basket-body {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
  border-radius: 12px 12px 0 0;
}

.basket-slats {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 8px 0;
}

.slat {
  height: 2px;
  background: rgba(255, 255, 255, 0.3);
  margin: 2px 0;
  border-radius: 1px;
}

.basket-handle {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: 25px;
  border: 5px solid #357ABD;
  border-bottom: none;
  border-radius: 40px 40px 0 0;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.checkmark {
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 48px;
  color: #4CAF50;
  font-weight: bold;
  text-shadow: 
    0 4px 8px rgba(0, 0, 0, 0.3),
    0 2px 4px rgba(76, 175, 80, 0.5);
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
  z-index: 10;
}

.coins-stack {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
}

.coin {
  width: 35px;
  height: 35px;
  background: linear-gradient(135deg, #FFD700 0%, #FFA500 100%);
  border-radius: 50%;
  margin-bottom: 8px;
  box-shadow: 
    0 6px 16px rgba(0, 0, 0, 0.25),
    inset 0 2px 4px rgba(255, 255, 255, 0.4);
  border: 2px solid rgba(255, 215, 0, 0.3);
}

.coin-1 { 
  transform: translateX(0px) translateZ(10px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
}
.coin-2 { 
  transform: translateX(8px) translateZ(5px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25);
}
.coin-3 { 
  transform: translateX(16px) translateZ(0px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.stars {
  position: absolute;
  top: -20px;
  left: -20px;
  right: -20px;
  bottom: -20px;
}

.star {
  position: absolute;
  color: #FFD700;
  font-size: 20px;
  animation: twinkle 3s infinite;
  text-shadow: 
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 0 8px rgba(255, 215, 0, 0.5);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.star-1 { 
  top: 10px; 
  left: 10px; 
  animation-delay: 0s;
  font-size: 18px;
}
.star-2 { 
  top: 30px; 
  right: 20px; 
  animation-delay: 0.8s;
  font-size: 22px;
}
.star-3 { 
  bottom: 20px; 
  left: 30px; 
  animation-delay: 1.6s;
  font-size: 16px;
}
.star-4 { 
  bottom: 10px; 
  right: 10px; 
  animation-delay: 2.4s;
  font-size: 20px;
}

@keyframes twinkle {
  0%, 100% { 
    opacity: 0.4; 
    transform: scale(1) rotate(0deg); 
  }
  50% { 
    opacity: 1; 
    transform: scale(1.3) rotate(180deg); 
  }
}

/* 成功消息 */
.success-message {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 20px;
}

.message-text {
  font-size: 18px;
  font-weight: 600;
}

.success-icon {
  width: 24px;
  height: 24px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(10px);
}

.checkmark-small {
  font-size: 14px;
  color: white;
  font-weight: bold;
}

/* 底部订单信息区域 */
.order-info-section {
  background: white;
  border-radius: 24px 24px 0 0;
  padding: 24px 20px;
  margin-top: 20px;
  min-height: 60vh;
}

/* 预计配送 */
.delivery-info {
  text-align: center;
  margin-bottom: 24px;
}

.delivery-label {
  font-size: 14px;
  color: #999;
  margin-bottom: 8px;
}

.delivery-time {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

/* 订单状态按钮 */
.order-status-btn {
  background: white;
  border: 2px solid #4A90E2;
  border-radius: 12px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 24px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.15);
}

.order-status-btn:hover {
  background: #F8FBFF;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(74, 144, 226, 0.2);
}

.status-text {
  font-size: 16px;
  font-weight: 600;
  color: #4A90E2;
}

.play-icon {
  width: 32px;
  height: 32px;
  background: #4A90E2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.play-triangle {
  font-size: 12px;
  color: white;
  margin-left: 2px;
}

/* 订单详情列表 */
.order-details-list {
  margin-bottom: 32px;
}

.detail-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 20px;
  padding: 16px;
  background: #F8F9FA;
  border-radius: 12px;
}

.detail-item:last-child {
  margin-bottom: 0;
}

.detail-icon {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}

.order-icon {
  background: linear-gradient(135deg, #4CAF50 0%, #45A049 100%);
  color: white;
}

.time-icon {
  background: linear-gradient(135deg, #FF9800 0%, #F57C00 100%);
  color: white;
}

.payment-icon {
  background: linear-gradient(135deg, #2196F3 0%, #1976D2 100%);
  color: white;
}

.detail-content {
  flex: 1;
}

.detail-label {
  font-size: 14px;
  color: #666;
  margin-bottom: 4px;
}

.detail-value {
  font-size: 16px;
  font-weight: 600;
  color: #4A90E2;
}

/* 继续购物按钮 */
.continue-shopping-btn {
  background: linear-gradient(135deg, #4A90E2 0%, #357ABD 100%);
  color: white;
  border: none;
  border-radius: 12px;
  padding: 18px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
  transition: all 0.3s ease;
  box-shadow: 0 6px 16px rgba(74, 144, 226, 0.3);
}

.continue-shopping-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(74, 144, 226, 0.4);
}

.continue-shopping-btn:active {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(74, 144, 226, 0.3);
}

/* 响应式设计 */
@media (max-width: 480px) {
  .success-section {
    padding: 16px;
    padding-top: 50px;
  }
  
  .back-button {
    width: 36px;
    height: 36px;
  }
  
  .back-arrow {
    font-size: 20px;
  }
  
  .title {
    font-size: 16px;
  }
  
  .shopping-basket {
    width: 120px;
    height: 80px;
  }
  
  .checkmark {
    font-size: 36px;
    right: -25px;
  }
  
  .coin {
    width: 30px;
    height: 30px;
  }
  
  .coins-stack {
    right: -50px;
  }
  
  .order-info-section {
    padding: 20px 16px;
  }
  
  .delivery-time {
    font-size: 16px;
  }
  
  .order-status-btn {
    padding: 14px 16px;
  }
  
  .status-text {
    font-size: 15px;
  }
  
  .detail-item {
    padding: 14px;
  }
  
  .detail-icon {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }
  
  .continue-shopping-btn {
    padding: 16px;
    font-size: 15px;
  }
}
</style> 